Vue.component('tabBar', {
	props: ['nowTabbar'],
	data: function() {
		return {
			tabBarList: [{
				title: '首页',
				icon: 'mui-icon-home',
				href: 'index',
			},{
				title: '书城',
				icon: 'mui-icon-help',
				href: 'bookCity',
			},{
				title: '论坛',
				icon: 'mui-icon-help',
				href: 'bbsPage',
			},{
				title: '我的',
				icon: 'mui-icon-help',
				href: 'pages/aboutMe',
			}],
		}
	},
	template: (
	`<div class="tabbar-container">
		<div v-for="(temp, index) in tabBarList" @tap="index == nowTabbar ? '' : isApp(temp.href)" class="tabbar-item" :class="index == nowTabbar ? 'active' : '' ">
			<i class="mui-icon" :class="temp.icon"></i>
			<div>{{temp.title}}</div>
		</div>
	</div>`),
	mounted: function() {
		var _this = this;
		mui.plusReady(function() {
			if(mui.os.plus) {
				// 创建子页面
				_this.initPluspage();
			}
		})
	},
	methods: {
		isApp: function(uri) {
			// 非plus环境,直接href跳转
			if (!mui.os.plus) {
				this.switchPage(uri);
				return;
			}

			this.switchPluspage(uri)

		},
		initPluspage: function() {
			var subpages = this.tabBarList;
			var self = plus.webview.currentWebview();
			var subpage_style = {
				top: 0,
			};

			// if (mui.os.android) {
			// 	if (plus.navigator.isImmersedStatusbar()) {
			// 		subpage_style.top += plus.navigator.getStatusbarHeight();
			// 	}
			// }

			if (mui.os.android) {
				if (plus.navigator.isImmersedStatusbar()) {
					document.querySelector('.mui-bar').style = 'padding-top: '+plus.navigator.getStatusbarHeight()+'px; height: ' +(plus.navigator.getStatusbarHeight()+44) + 'px';
					document.querySelector('.mui-content').style = 'padding-top: ' +(plus.navigator.getStatusbarHeight()+44) + 'px';
				}
			}

			for (var i = 0, len = subpages.length; i < len; i++) {
				if (!plus.webview.getWebviewById(subpages[i].href)) {
					var sub = plus.webview.create(subpages[i].href + '.html', subpages[i].href, subpage_style);
					sub.hide();
					self.append(sub)
				}
			}
		},
		switchPluspage: function(href) {
			if (mui.os.ios) {
	      plus.webview.show(href);
	    }else {
				if (href !== 'pages/aboutMe') {
					plus.webview.show(href, 'fade-in', 300);
				}else {
					href = href + '.html';
					mui.openWindow({url:href, id:'aboutMe', waiting: {autoShow: false}});
					// plus.webview.open(href + '.html', 'aboutMe', {}, 'slide-in-right', 200);
				}
	    }
		},
		switchPage: function(uri) {
			var baseUri = './';
			var href = baseUri + uri + '.html';
			var options = {
				waiting: {
					autoShow: false
				},
			};
			mui.openWindow(href, uri)
		},
	},
})
